<template>
  <a-drawer
    width="50%"
    placement="right"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    :title="DrawerTitle"
  >
    <a-form-model
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <!-- <a-form-model-item label="用户身份" prop="identityType">
        <role-select v-model="ruleForm." />
      </a-form-model-item> -->
      <a-form-model-item prop="name">
        <template slot="label">
          登录账号
          <a-popover trigger="hover" content="主要用于系统登录用户名使用">
            <img
              class="exclamation"
              src="https://zlj-xft-test.oss-cn-shenzhen.aliyuncs.com/da4b7e12-464c-45da-bccf-63b94998b452.png"
            />
          </a-popover>
        </template>
        <a-input v-model="ruleForm.name" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="登录密码" prop="password">
        <a-input
          v-model="ruleForm.password"
          type="password"
          placeholder="请输入"
          allow-clear
        ></a-input>
      </a-form-model-item>
      <a-form-model-item label="角色说明" prop="userInfo">
        <a-textarea v-model="ruleForm.userInfo" placeholder="请输入" allow-clear></a-textarea>
      </a-form-model-item>
      <!-- <a-form-model-item label="绑定手机号" prop="phone">
        <a-input v-model="ruleForm.phone" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item> -->
      <!-- <a-form-model-item label="选择角色" prop="roleIdList" v-if="ruleForm.identityType">
        <a-checkbox-group @change="onChange" v-model="ruleForm.roleIdList">
          <a-checkbox :value="item.id" v-for="item in allRoleList" :key="item.id">
            {{ item.roleName }}
          </a-checkbox>
        </a-checkbox-group>
      </a-form-model-item> -->
      <a-form-model-item :wrapper-col="{ span: 13, offset: 3 }">
        <a-button type="primary" :loading="submitLoading" @click="menuSubmit">保存</a-button>
        <a-button @click="onClose">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { shortUserAddOrUpdate } from '@/api/short'
import { mapState } from 'vuex'
const RoleDescs = { admin: '代理商', agent: '总监', commissioner: '业务员' }
export default {
  name: 'RoleForm',
  data() {
    return {
      visible: false,
      ruleForm: {
        password: '',
        name: '',
        userInfo: '',
        status: '1'
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      rules: {
        name: [{ required: true, message: '登录账号不能为空' }],
        userInfo: [{ required: true, message: '角色说明不能为空' }],
        phone: [
          { required: true, message: '绑定手机号不能为空' },
          { message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }
        ],
        roleIdList: [{ type: 'array', required: true, message: '请选择角色' }],
        password: [{ required: true, message: '登录密码不能为空' }]
      },
      allRoleList: [],
      submitLoading: false,
      DrawerTitle: '账号配置'
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.info
    })
  },
  methods: {
    onChange(e) {
      console.log(e, 'e')
    },
    open(record = {}) {
      this.DrawerTitle = (record.id?'编辑':'新增') + (record.id ? record.userTypeDesc : RoleDescs[this.userInfo.userType])
      if (record.id) {
        this.ruleForm = {...record}
      }
      this.visible = true
    },
    afterVisibleChange(val) {
      if (!val) {
        this.ruleForm = {
          password: '',
          name: '',
          userInfo: '',
          status: '1'
        }
      }
    },
    onClose() {
      this.visible = false
    },
    menuSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          shortUserAddOrUpdate(this.ruleForm)
            .then(() => {
              this.$notification['success']({
                message: '提示',
                description: `${this.ruleForm.id ? '编辑' : '新增'}成功`
              })
              this.onClose()
              this.submitLoading = false
              this.$emit('on-submit')
            })
            .catch(() => {
              this.submitLoading = false
            })
        }
      })
    },
    getAllRoleList() {
      const { identityType } = this.ruleForm
      getRoleList({
        pageSize: 99999,
        pageNum: 1,
        status: '1',
        identityType
      }).then((res) => {
        console.log(res)
        // res.data.forEach((item) => {
        //   item.key = String(item.id)
        //   item.title = item.name
        // })
        this.allRoleList = res.rows
      })
    }
  }
}
</script>

<style></style>
